@use "sass:math";
@import "../../css/variables";

.blog-post {
  .blog-post-main {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .blog-post-content {
      width: 70%;
      border-top: 1px solid $gray-300;

      & > h1 {
        line-height: 1.4;
        margin-bottom: $spacer * 2;
      }

      & > h2, & > h3, & > h4 {
        line-height: 1.4;
        margin-top: $spacer * 3;
      }

      ul {
        padding-left: 1.1rem;
      }

      ul ul {
        padding-left: 1.3rem;
        margin-top: math.div($spacer, 2);
        margin-bottom: $spacer;
      }

      li {
        margin-bottom: math.div($spacer, 2);
      }

      img {
        display: block;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
      }

      .youtube-embed {
        padding-bottom: 56.25%;
        position: relative;
        display: block;

        iframe {
          position: absolute;
          left: 0;
          top: 0;
          bottom: 0;
          right: 0;
          width: 100%;
          height: 100%;
        }
      }

      blockquote {
        margin: 0 0 $spacer;
        border-left: 5px solid $gray-300;
        font-style: italic;

        p {
          padding: math.div($spacer, 4) $spacer;
        }
      }

      .gist .gist-data {
        max-height: 500px;
      }
    }

    .blog-post-sidebar {
      width: calc(30% - #{$spacer * 2});
      border-top: 1px solid $gray-300;

      .blog-post-author {
        margin-top: $spacer;
        display: flex;
        align-items: center;

        &:first-child {
          margin-top: $spacer * 2;
        }

        .blog-post-author-avatar {
          width: 60px;
          height: 60px;
          border-radius: 30px;
          margin-right: math.div($spacer, 5) * 4;
        }

        .blog-post-author-name {
          font-size: 1.2rem;
          line-height: 1.2;
          margin-bottom: math.div($spacer, 4);

          a {
            font-weight: 400;
          }
        }
      }

      .blog-post-sidebar-pinned {
        display: flex;
        margin-top: $spacer * 2;
      }

      .blog-post-sidebar-date {
        margin-top: $spacer;
      }

      .blog-post-sidebar-category {
        text-transform: uppercase;
        font-weight: 400;
      }

      .blog-post-sidebar-reading-time {
        margin-top: $spacer * 2;

        .feather {
          margin-bottom: 2px;
          margin-right: 2px;
        }
      }

      .blog-post-sidebar-share-icons {
        margin-top: $spacer * 2;

        a {
          color: $gray-800;

          svg {
            transition: transform $button-transition-time $button-transition-ease;
          }

          &:hover {
            svg {
              transform: scale(1.1);
            }
          }

          &:not(:last-child) {
            margin-right: math.div($spacer, 3) * 2;
          }
        }
      }
    }

    @media (max-width: $lg) {
      flex-direction: column;

      .blog-post-content {
        width: 100%;
      }

      .blog-post-sidebar {
        width: 100%;
        text-align: center;

        .blog-post-author {
          justify-content: center;
          margin-bottom: $spacer * 2;
        }
      }
    }
  }

  .blog-post-next-prev {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: $spacer * 4;
    border-top: 1px solid $gray-300;
    margin-top: $spacer * 6;
    padding-top: $spacer * 2;

    h5 {
      text-align: center;
    }

    .blog-post-next-prev-entry {
      &:last-child {
        grid-column-start: 3;
      }
    }

    @media (max-width: $lg) {
      margin-top: $spacer * 3;
      grid-template-columns: 1fr;
      grid-gap: $spacer * 2;

      .blog-post-next-prev-entry {
        &:last-child {
          grid-column-start: 1;
        }
      }
    }
  }

  .blog-post-related {
    padding-top: $spacer * 2;

    h5 {
      text-align: center;
    }

    .blog-post-related-posts {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-gap: $spacer * 4;

      @media (max-width: $lg) {
        grid-template-columns: 1fr;
      }
    }
  }
}
